<template>
	<image class="img" v-if="url!=''" :src="url" :mode="imgmode" @load="load" @error="iconerror"></image>
</template>

<script>
	import {
		isNull
	} from 'util';
	export default {
		name: "divImg",

		props: {
			src: "",
			mode: "",
			errorUrl: "",
		},
		watch: {
			src: {
				handler(newVal) {
					// newVal=newVal.replace('/static/','https://xcx.mcsljc.com/XcxStatic/')
					this.url = newVal+ '?'+ this.version
				},
				immediate: true
			},
			mode: {
				handler(newVal) {
					this.imgmode = newVal
				},
				immediate: true
			}
		},
		data() {
			return {
				url: "",
				imgmode: ''
			};
		},
		// mounted() {
		// 	this.url = this.src
		// 	this.imgmode=this.mode
		// 	console.log(this.url)
		// },
		methods: {
			iconerror() {
				this.url = this.errorUrl && this.errorUrl != '' && !isNull(this.errorUrl) ? this.errorUrl :
					"/static/images/error.png";
					this.imgmode=this.imageMode
			},
			load() {
				this.$emit('load')
			}
		}
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
		height: 100%;
	}
</style>